import { createElement, HTMLAttributes, type FC } from 'react';
import classNames from 'classnames';
import { gridColumnDefaultProps } from './defaultProps';
import type { GridColumnOptions } from './type';
import numberToWord from '../_util/numberToWord';

export interface GridColumnProps extends GridColumnOptions, Omit<HTMLAttributes<HTMLDivElement>, 'color'> {}

const GridColumn: FC<GridColumnProps> = (props) => {
  const {
    className,
    wide,
    computer,
    largeScreen,
    mobile,
    tablet,
    widescreen,
    floated,
    color,
    textAlign,
    verticalAlign,
    only,
    children,
    forwardedRef,
    ...gridColumnProps
  } = props;

  return createElement(
    'div',
    {
      ref: forwardedRef,
      className: classNames(
        numberToWord(wide),
        { wide },
        numberToWord(computer),
        { wide: computer, computer },
        numberToWord(largeScreen),
        { wide: largeScreen, largeScreen },
        numberToWord(mobile),
        { wide: mobile, mobile },
        numberToWord(tablet),
        { wide: tablet, tablet },
        numberToWord(widescreen),
        { wide: widescreen, widescreen },
        color,
        textAlign,
        { aligned: textAlign === 'justified' ? false : textAlign },
        verticalAlign,
        { aligned: verticalAlign },
        floated,
        { floated },
        only,
        { only },
        'column',
        className,
      ),
      ...gridColumnProps,
    },
    children,
  );
};

GridColumn.displayName = 'GridColumn';
GridColumn.defaultProps = gridColumnDefaultProps;

export default GridColumn;
